<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="username" type="text" placeholder="账号">
    <br>
    <input id="p" type="password" placeholder="密码">
    <br><br>
    <button onclick="ajaxGet()">ajax get提交</button>
    <hr>
    <button onclick="ajaxForm()">ajax form表单提交</button>
    <hr>
    <button onclick="ajaxJSON()">ajax json提交</button>
    <hr>
    <label for="head">上传头像</label><input id="head" type="file">
    <br>
    <button onclick="ajaxFormData()">ajax form-data提交</button>
    <script src="../util.js"></script>
    <script>
        // 通过ajax构造http请求
        var username = document.querySelector("#username");
        var password = document.querySelector("#p");
        function ajaxGet(){
            ajax({
                method: "GET",
                url: "../request/get?username="+username.value
                    +"&password="+password.value,
                callback: function(status, resp){
                    console.log("响应状态码："+status+", 响应正文："+resp)
                }
            })
        }

        function ajaxForm(){
            ajax({
                method: "POST",
                url: "../request/post",
                contentType: "application/x-www-form-urlencoded",
                body: "username="+username.value
                    +"&password="+password.value,
                callback: function(status, resp){
                    console.log("响应状态码："+status+", 响应正文："+resp)
                }
            })
        }
        
        function ajaxJSON(){
            //json对象---- 属性名：值
            var data = {
                username: username.value,
                password: password.value,
            };
            console.log(data);
            //json字符串
            console.log(JSON.stringify(data));

            ajax({
                method: "POST",
                url: "../request/json",
                contentType: "application/json",
                body: JSON.stringify(data),
                callback: function(status, resp){
                    console.log("响应状态码："+status+", 响应正文："+resp)
                }
            })
        }

        var head = document.querySelector("#head");
        function ajaxFormData(){
            //了解：form-data数据提交，是使用FormData对象
            var data = new FormData();
            data.append("username", username.value);
            data.append("password", password.value);
            //通过input type=file 这个dom元素的files属性，可以得到选择的文件（可以有多个）
            //如果选择了一个文件，就添加到formdata对象种
            var choosedFiles = head.files[0];
            if(choosedFiles){
                data.append("head", choosedFiles);
            }

            ajax({
                method: "POST",
                url: "../request/form-data",
                //了解：form-data不要设置content-type，发数据时ajax会自动设置
                body: data,
                callback: function(status, resp){
                    console.log("响应状态码："+status+", 响应正文："+resp)
                }
            })
        }
    </script>
</body>
</html>